/*
 * @Author: Strayer
 * @Date: 2022-12-04
 * @LastEditors: Strayer
 * @LastEditTime: 2022-12-11
 * @Description: 
 * @FilePath: \translateBox\src\components\translateBox\js\data.ts
 */

import { Ref, ShallowRef } from 'vue';
import { SpreadType } from './spread';
import { Tool } from './tool';

export type BtnItem ={
  name: SpreadType,
  angle: number, // 当前方向对应的角度
  cursor: string,
  top?: string,
  left?: string,
  right?: string,
  bottom?: string,
  width?: string,
  height?: string
};
export type Btn = Array<BtnItem>


// 缩放按钮图标
export const spreadBtnImg = '';
// 旋转按钮图标
export const rotateBtnImg = '';
// 透明按钮
export const opacityZeroImg = '';

export function getElement(boxId: string) {
  return document.getElementById(boxId)!
}

export function updateOriginBtnData({ btnDataOrigin, btnData, isFull }:{
  isFull?: boolean,
  btnDataOrigin: ShallowRef<Btn>,
  btnData: Ref<Btn>,
}) {
  if(isFull) {
    btnDataOrigin.value = [
      {
        name: 'top',
        angle: -90,
        cursor: 'n-resize',
        top: '-11.5px',
        left: '10px',
        width: 'calc(100% - 23px)',
      },{
        name: 'right',
        angle: 0,
        cursor: 'e-resize',
        right: '-11.5px',
        top: '10px',
        height: 'calc(100% - 23px)',
      },{
        name: 'bottom',
        angle: 90,
        cursor: 's-resize',
        bottom: '-11.5px',
        left: '10px',
        width: 'calc(100% - 23px)',
      },{
        name: 'left',
        angle: 180,
        cursor: 'w-resize',
        left: '-11.5px',
        top: '10px',
        height: 'calc(100% - 23px)',
      },{
        name: 'leftTop',
        angle: -135,
        cursor: 'nw-resize',
        top: '-11.5px',
        left: '-11.5px'
      },{
        name: 'rightTop',
        angle: -45,
        cursor: 'ne-resize',
        top: '-11.5px',
        right: '-11.5px',
      },{
        name: 'leftBottom',
        angle: 135,
        cursor: 'sw-resize',
        left: '-11.5px',
        bottom: '-11.5px',
      },{
        name: 'rightBottom',
        angle: 45,
        cursor: 'se-resize',
        right: '-11.5px',
        bottom: '-11.5px',
      },
    ]
  }else {
    btnDataOrigin.value = [
      {
        name: 'top',
        angle: -90,
        cursor: 'n-resize',
        top: '-11.5px',
        left: 'calc(50% - 11.5px)',
      },{
        name: 'right',
        angle: 0,
        cursor: 'e-resize',
        right: '-11.5px',
        top: 'calc(50% - 11.5px)'
      },{
        name: 'bottom',
        angle: 90,
        cursor: 's-resize',
        bottom: '-11.5px',
        left: 'calc(50% - 11.5px)'
      },{
        name: 'left',
        angle: 180,
        cursor: 'w-resize',
        left: '-11.5px',
        top: 'calc(50% - 11.5px)'
      },{
        name: 'leftTop',
        angle: -135,
        cursor: 'nw-resize',
        top: '-11.5px',
        left: '-11.5px'
      },{
        name: 'rightTop',
        angle: -45,
        cursor: 'ne-resize',
        top: '-11.5px',
        right: '-11.5px',
      },{
        name: 'leftBottom',
        angle: 135,
        cursor: 'sw-resize',
        left: '-11.5px',
        bottom: '-11.5px',
      },{
        name: 'rightBottom',
        angle: 45,
        cursor: 'se-resize',
        right: '-11.5px',
        bottom: '-11.5px',
      },
    ]
  }

  btnData.value = Tool.DeepClone(btnDataOrigin.value)
}

export function updateBtnData({ btnDataOrigin, btnData, translateBoxRotate }:{
  translateBoxRotate: Ref<number>,
  btnDataOrigin: ShallowRef<Btn>,
  btnData: Ref<Btn>,
}) {
  const newBtnData = Tool.DeepClone(btnDataOrigin.value)
  
  newBtnData.forEach(item => {
    item.angle += translateBoxRotate.value;
    if(item.angle > 180) item.angle -= 180;
    else if(item.angle < -180) item.angle += 180;

    if(item.angle >= -22.5 && item.angle <= 22.5) item.cursor = 'e-resize';
    if(item.angle >= 22.5 && item.angle <= 67.5) item.cursor = 'se-resize';
    if(item.angle >= 67.5 && item.angle <= 112.5) item.cursor = 's-resize';
    if(item.angle >= 112.5 && item.angle <= 157.5) item.cursor = 'sw-resize';
    if(item.angle >= 157.5 || item.angle <= -157.5) item.cursor = 'w-resize';
    if(item.angle >= -67.5 && item.angle <= -22.5) item.cursor = 'ne-resize';
    if(item.angle >= -112.5 && item.angle <= -67.5) item.cursor = 'n-resize';
    if(item.angle >= -157.5 && item.angle <= -112.5) item.cursor = 'nw-resize';
  })

  btnData.value = newBtnData
}